<script setup>
import { ref, onMounted } from 'vue'

import * as yup from 'yup'

const formSchema = ref({
  fields: [
    {
      label: 'Email',
      name: 'email',
      as: 'InputText',
      rules: yup.string().required().email()
    },
    {
      label: 'Password',
      name: 'password',
      feedbadk: false,
      as: 'Password',
      rules: yup.string().required()
    }
  ]
})

const formData = ref({ name: '', password: '' })
// useSchemaForm(formData)

onMounted(() => {
  console.log('hello login view.')
})
</script>
<template>
  <div class="flex w-1/2 flex-col gap-6 p-4">
    <div class="flex flex-col gap-6 sm:flex-row sm:items-center">
      <div class="flex-auto">
        <label for="firstname" class="mb-2 block font-semibold">Firstname</label>
        <InputText id="firstname" class="w-full" />
      </div>
      <div class="flex-auto">
        <label for="lastname" class="mb-2 block font-semibold">Lastname</label>
        <InputText id="lastname" class="w-full" />
      </div>
    </div>
    <div class="flex flex-col gap-6 sm:flex-row sm:items-center">
      <div class="flex-1">
        <label for="date" class="mb-2 block font-semibold">Date</label>
        <DatePicker inputId="date" class="w-full" />
      </div>
      <div class="flex-1">
        <label for="country" class="mb-2 block font-semibold">Country</label>
        <Select v-model="selectedCountry" inputId="country" :options="countries" optionLabel="name" placeholder="Select a Country" class="w-full">
          <template #value="slotProps">
            <div v-if="slotProps.value" class="flex items-center">
              <img :alt="slotProps.value.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png"
                :class="`flag mr-2 flag-${slotProps.value.code.toLowerCase()}`" style="width: 18px" />
              <div>{{ slotProps.value.name }}</div>
            </div>
            <span v-else>
              {{ slotProps.placeholder }}
            </span>
          </template>
          <template #option="slotProps">
            <div class="flex items-center">
              <img :alt="slotProps.option.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png"
                :class="`flag mr-2 flag-${slotProps.option.code.toLowerCase()}`" style="width: 18px" />
              <div>{{ slotProps.option.name }}</div>
            </div>
          </template>
        </Select>
      </div>
    </div>
    <div class="flex-auto">
      <label for="message" class="mb-2 block font-semibold">Message</label>
      <Textarea id="message" class="w-full" rows="4" />
    </div>
  </div>
</template>
